import React, { Component } from 'react'
import noop from 'lodash/noop'
import Icon from '../icon/Icon'
import * as helper from '../../utilities/helper'
import * as color from '../../configs/color'
import * as layout from '../../configs/layout'

const listViewStyle = {
    height: '46px',
    backgroundColor: color.WHITE,
    paddingLeft: layout.HORIZONTAL_PADDING,
    paddingRight: layout.HORIZONTAL_PADDING
}

const labelStyle = {
    fontSize: '16px',
    color: color.DARK
}

const chevronStyle = {
    color: color.CHEVRON,
    width: '20px'
}

const themes = {}

export default class ListView extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.props.onClick()
    }

    render() {
        return (
            <div onClick={this.handleClick} className="flex-h flex-vc" style={helper.combineStyles(listViewStyle, {}, '', this.props.style)}>
                <label className="flex1" style={labelStyle}>{this.props.label}</label>
                {this.props.chevron ? <Icon iconName="chevron" style={chevronStyle}/> : null}
            </div>
        )
    }
}

ListView.defaultProps = {
    chevron: true,
    label: '',
    onClick: noop
}

ListView.propTypes = {
    chevron: React.PropTypes.bool,
    label: React.PropTypes.string
}
